<template>
  <div class="flex flex-col h-full">
    <a-card class="flex-1">
      <div class="flex justify-between">
        <div style="width: 63%">
          <div class="flex justify-between mb-2">
            <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '70px' } }">
              <a-form-item name="dictCommonType" class="w-72 mb-0">
                <a-input v-model:value="formState.dictCommonType" placeholder="字典类别/字典名称" allow-clear @keyup.enter="getData()" @blur="getData()" />
              </a-form-item>
            </a-form>
            <div class="flex justify-between">
              <a-button @click="handleReset">重置</a-button>
              <a-button class="ml-2 mr-2" type="primary" @click="getData()">搜索</a-button>
            </div>
          </div>
          <BaseTable
            column-code="000796"
            fill
            :data-source="tableData"
            bordered
            :custom-row="(record) => ({ onClick: () => onSelectRow(record) })"
            :row-class-name="(record) => (record.index === selectLeftRow.index ? 'selected-row' : '')"
            @change="onPageChange"
          />
        </div>
        <div style="width: 35%">
          <div class="flex justify-between h-[40px] items-center text-sm font-bold">
            <div class="">{{ selectLeftRow.dictItemName }}</div>
            <div>{{ selectLeftRow.dictItemCode }}</div>
            <div>{{ selectLeftRow.dictCommonName }}</div>
            <div>{{ selectLeftRow.dictCommonCode }}</div>
            <div>{{ selectLeftRow.dictCommonType }}</div>
          </div>
          <BaseTable column-code="000797" fill :data-source="drugData" bordered>
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'dictName'">
                <EditCell title="字典名称">
                  <a-input v-model:value="record.dictName" :disabled="isLoading" placeholder="请输入" @blur="onBlur(record)" />
                </EditCell>
              </template>
              <template v-if="column.dataIndex === 'dictCode'">
                <EditCell title="字典代码">
                  <a-input v-model:value="record.dictCode" :disabled="isLoading" placeholder="请输入" @blur="onBlur(record)" />
                </EditCell>
              </template>
            </template>
          </BaseTable>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import BaseTable from '@/components/BaseTable'
import { post } from '@/utils/request'

const loading = ref(false)
const formRef = ref(null)
const formState = ref({})
const selectLeftRow = ref({})
const isLoading = ref(false)
const tableData = ref([])
const drugData = ref([])
const getData = async () => {
  loading.value = true
  const { code, data } = await post('/med/MedicalRecord/getMrDictList', {
    dictCommonType: formState.value.dictCommonType,
    pageNum: 1,
    pageSize: 100
  })
  loading.value = false
  if (code === 0) {
    tableData.value =
      data.map((element, index) => {
        element.index = index + 1
        return element
      }) || []
    //多加个下标
  }
}

const getRightDrugList = async () => {
  const { code, data } = await post('/med/MedicalRecord/getMrDictDetailList', {
    ...selectLeftRow.value
  })
  if (code === 0) {
    drugData.value = data || []
    isLoading.value = false
  }
}
const onBlur = async (row) => {
  isLoading.value = true
  const { code, msg } = await post('/med/MedicalRecord/dosaveInpMrDictMatch', {
    dictCommonCode: selectLeftRow.value.dictCommonCode,
    dictItemCode: selectLeftRow.value.dictItemCode,
    ...row
  })
  if (code !== 0) return message.error(msg || '保存失败')
  message.success(msg || '保存成功')
  getRightDrugList()
}
const onSelectRow = (select) => {
  selectLeftRow.value = select
  getRightDrugList()
}

const handleReset = () => {
  formRef.value.resetFields()
  getData()
}
onMounted(() => {
  getData()
  getRightDrugList()
})
</script>
<style lang="less" scoped>
.ant-picker {
  width: 100%;
}

.table-row-select {
  background-color: red !important;
}
</style>
